<template>
  <view class="task-details">
    <view class="transition-bg">
      <view>
        <view class="u-line-3 project-name">
          {{ projectInfo.projectName }}
        </view>
        <view class="tag-box">
          <view>
            <text class="tag-item">
              {{ projectInfo.projectType
              }}{{
                projectInfo.drugRegister ? '-' + projectInfo.drugRegister : ''
              }}
            </text>
            <text class="tag-item m-x-10" v-if="projectInfo.stages">{{
              projectInfo.stages
            }}</text>
            <text class="tag-item">{{ projectInfo.projectNo }}</text>
          </view>
        </view>
        <view class="u-m-t-20">
          <describeVue
            :data="taskInfo"
            :column="headColumn"
            :empty-value="'无'"
          ></describeVue>
        </view>
        <view class="u-m-t-10 u-m-b-10">
          <u-divider
            border-color="#e8eaee"
            half-width="50%"
            :use-slot="false"
          ></u-divider>
        </view>
        <view class="u-text-right">
          <!--立项后补-->
          <view v-if="taskInfo.taskType === 13">
            <text
              class="font-bold"
              :class="
                TASK_STATUS_TYPES_MAP[taskInfo.sopTaskObject.taskStatus]?.color
              "
              >{{
                TASK_STATUS_TYPES_MAP[taskInfo.sopTaskObject.taskStatus]?.label
              }}</text
            >
            <view>
              后补状态：
              <text
                class="font-bold"
                :class="TASK_STATUS_TYPES_MAP[taskInfo.taskStatus]?.color"
                >{{ TASK_STATUS_TYPES_MAP[taskInfo.taskStatus]?.label }}</text
              >
            </view>
          </view>
          <view v-else-if="taskInfo.sopTaskObject">
            <text
              class="font-bold"
              :class="TASK_STATUS_TYPES_MAP[taskInfo.taskStatus]?.color"
              >{{ TASK_STATUS_TYPES_MAP[taskInfo.taskStatus]?.label }}</text
            >
            <!--后补状态大于2才显示,撤回有待反馈状态-->
            <view v-if="taskInfo.sopTaskObject.taskStatus > 2">
              后补状态：
              <text
                class="font-bold"
                :class="
                  TASK_STATUS_TYPES_MAP[taskInfo.sopTaskObject.taskStatus]
                    ?.color
                "
                >{{
                  TASK_STATUS_TYPES_MAP[taskInfo.sopTaskObject.taskStatus]
                    ?.label
                }}</text
              >
            </view>
          </view>
          <view v-else>
            <text
              class="font-bold"
              :class="TASK_STATUS_TYPES_MAP[taskInfo.taskStatus]?.color"
              >{{ TASK_STATUS_TYPES_MAP[taskInfo.taskStatus]?.label }}</text
            >
          </view>
        </view>
      </view>
    </view>
    <u-card>
      <template #head>
        <u-icon
          size="28"
          custom-prefix="custom-icon"
          color="#0177fd"
          name="wenjian"
        ></u-icon>
        <text class="u-m-l-10 font-bold u-font-lg">任务信息</text>
      </template>
      <view class="" slot="body">
        <describeVue :data="taskInfo" :column="column" :empty-value="'无'">
          <template #taskType="{ data }">
            <!--立项后补-->
            <text v-if="taskInfo.taskType === 13">
              {{ TASKTYPES_MAP[taskInfo.sopTaskObject.taskType] }}
            </text>
            <text v-else>
              {{ TASKTYPES_MAP[taskInfo.taskType] }}
            </text>
          </template>
          <template #priority="{ data }">
            <u-tag
              v-if="priorityList[taskInfo.priority]?.label"
              :text="priorityList[taskInfo.priority]?.label"
              :type="priorityList[taskInfo.priority]?.color"
            ></u-tag>
            <text v-else>无</text>
          </template>
          <template #memberList="{ data }">
            {{
              taskInfo.memberList && taskInfo.memberList.length
                ? taskInfo.memberList?.join('、')
                : '无'
            }}
          </template>
          <template #startType="{ data }">
            {{ taskInfo.startType ? startType[taskInfo.startType] : '无' }}
          </template>
          <template #milepost="{ data }">
            {{ taskInfo.milepost ? '是' : '否' }}
          </template>
          <template #remindTypeChecked="{ data }">
            {{ taskInfo.remindTypeChecked ? '是' : '否' }}
          </template>
        </describeVue>
      </view>
    </u-card>
  </view>
</template>
<script lang="ts" setup>
import describeVue from '@/components/describe.vue';
import { toRefs } from 'vue';
import { TASKTYPES_MAP, TASK_STATUS_TYPES_MAP } from '../../index';

const props = defineProps<{
  taskInfo: any;
  projectInfo: any;
}>();

const { taskInfo, projectInfo } = toRefs(props);
const column = [
  {
    label: '任务名称',
    prop: 'taskName',
    width: 200,
  },
  {
    label: '所属阶段',
    prop: 'phaseName',
    width: 200,
  },
  {
    label: '任务类型',
    prop: 'taskType',
    width: 200,
  },
  {
    label: '优先级',
    prop: 'priority',
    width: 200,
  },
  {
    label: '任务责任人',
    prop: 'memberList',
    width: 200,
  },
  {
    label: '任务开始规则',
    prop: 'startType',
    width: 200,
  },
  {
    label: '是否设为里程碑任务',
    prop: 'milepost',
    width: 300,
  },
  {
    label: '是否发送手机短信提醒',
    prop: 'remindTypeChecked',
    width: 300,
  },
  {
    label: '任务描述',
    prop: 'taskDesc',
    width: 200,
  },
];

const headColumn = [
  {
    label: '任务发布人',
    prop: 'publishUser',
    width: 200,
  },
  {
    label: '任务发布时间',
    prop: 'publishTime',
    width: 200,
  },
  {
    label: '当前经办人',
    prop: 'approvalParamValue',
    width: 200,
  },
];

const priorityList: any = {
  1: {
    label: '一般',
    color: 'primary',
  },
  2: {
    label: '紧急',
    color: 'warning',
  },
  3: {
    label: '非常紧急',
    color: 'error',
  },
};

const startType: any = {
  1: '不限',
  2: '自定义',
  3: '按项目进度',
};
</script>
<style lang="scss">
.transition-bg {
  width: 90%;
  // height: 400rpx;
  border-radius: 30rpx;
  padding: 20rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  background: linear-gradient(to top, #d6e9ff, #fff);

  .project-name {
    font-size: 32rpx;
    height: auto;
    font-weight: bold;
  }
  .tag-box {
    display: flex;
    justify-content: space-between;
    margin-top: 10rpx;
    align-items: center;

    .tag-item {
      background: rgba(255, 255, 255, 0.5);
      padding: 5rpx 10rpx;
      border-radius: 10rpx;
      font-size: 24rpx;
      color: #0177fd;
    }
    .m-x-10 {
      margin: 0 10rpx;
    }
  }
}
</style>
